<template>
  <div id="box">
    <div class="head">
      <div class="el-icon-menu"></div>
      <div class="head_Text">销售管理</div>
      <!-- <div class="xian"></div> -->
    </div>
    <div class="body">
      <el-dropdown @command="handleClick" class="tongji" trigger="click">
        <el-button type="primary">
          {{ this.tongji_way_index == null ? "统计方式" : this.tongji_way[tongji_way_index]}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" style="width: 130px; background-color: #199ed8; color: #ffffff">
          <el-dropdown-item class="tongji_dropdown_menue" :command="i" v-for="(v, i) in tongji_way" :key="i">{{ v }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown class="years" @command="command_Years">
        <el-button type="primary">
          {{ this.years_index == null ? "年" : this.years[years_index] }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" style="width: 155px">
          <el-dropdown-item v-for="(v, i) in years" :key="i" :command="i">
            {{v}}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown class="months" @command="command_Months">
        <el-button type="primary" :disabled=months_disabled>
          {{ this.months_index == null || this.months[months_index] != undefined? "月" : this.months[months_index] + '月' }}
          <i class="el-icon-arrow-down el-icon--right" :class="{'month_display_arrow':this.months_disabled}"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" style="width: 155px">
          <el-dropdown-item v-for="(v, i) in months" :key="i" :command="i">
            {{v + '月'}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown class="oneLei" v-show="number == 2" @command="command_OneLei">
        <el-button type="primary">
          {{ this.oneLei_index == null ? "一类产品" : this.oneLei[oneLei_index]}}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" style="width: 140px">
          <el-dropdown-item v-for="(v, i) in oneLei" :key="i" :command="i">{{
            v
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-input class="input" placeholder="请输入员工工号" v-model="inputs" clearable v-show="number == 1" @input="inputs_ID">
      </el-input>

      <el-dropdown class="twoLei" v-show="number == 2" @command="command_TwoLei">
        <el-button type="primary" :disabled="TwoLei_disabled">
          {{ this.TwoLei_index == null || this.TwoLei[TwoLei_index] != undefined? "二类产品" : this.TwoLei[TwoLei_index]}}
          <i class="el-icon-arrow-down el-icon--right" v-show="false"
            :class="{'twoLei_display_arrow':TwoLei_disabled}"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown" style="width: 140px">
          <el-dropdown-item v-for="(v, i) in TwoLei" :key="i" :command="i">{{
            v
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-row class="chakan">
        <el-button type="primary" plain @click="show_Click">查看</el-button>
      </el-row>
    </div>

    <div class="foot">
      <!-- charts == 0?'#charts':'#charts1' -->
      <div class="foot_one">
        <el-button class="text_button" v-print="'#charts'" v-if="number == 1" type="text" :disabled="number1">打印报表
        </el-button>
        <div class="chart" id="charts" v-show="number == 1"></div>
      </div>

      <div class="foot_two">
        <el-button class="text_button" v-print="'#charts1'" v-if="number == 2" type="text" :disabled="number2">打印报表
        </el-button>
        <div class="chart" id="charts1" v-show="number == 2"></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
/* 大盒子 */
#box {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
}

/* head部分 */
.head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  .el-icon-menu {
    display: inline-block;
    font-size: 24px;
    color: rgba(0, 0, 0, 0.6);
    vertical-align: middle;
    margin-right: 5px;
  }
  .head_Text {
    display: inline-block;
    color: rgba(0, 0, 0, 0.6);
    font-size: 16px;
    vertical-align: middle;
  }
}

/* body部分 */
.body {
  width: 100%;
  height: 70px;
  position: relative;
  background: #7f7d801a;
  border-radius: 7px;
  margin-top: 20px;

  .tongji {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);

    .el-button {
      width: 130px;
      /deep/span {
        display: block;
        width: 80px;
        text-align: left;
      }
      .el-icon--right {
        color: rgba(0, 0, 0, 0.5);
        position: fixed;
        right: 15px;
      }
    }
  }
  .years {
    position: absolute;
    left: 150px;
    top: 50%;
    transform: translateY(-50%);
  }

  .months {
    position: absolute;
    left: 330px;
    top: 50%;
    transform: translateY(-50%);
  }

  .oneLei {
    position: absolute;
    left: 510px;
    top: 50%;
    transform: translateY(-50%);
  }

  .input {
    width: 150px;
    position: absolute;
    left: 520px;
    top: 50%;
    transform: translateY(-50%);
  }

  .twoLei {
    position: absolute;
    left: 685px;
    top: 50%;
    transform: translateY(-50%);
    .el-icon-arrow-down {
      display: block !important;
      top: 15px;
    }
  }
  /deep/ .chakan .el-button:hover {
    background: #e0dfdf;
  }
  .chakan {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%);
    .el-button {
      background: #409eff;
    }
    .el-button--primary.is-plain {
      color: #ffffff;
      border-color: #b3d8ff;
    }
  }
}

//当下拉菜单被禁用时，里面的下拉箭头鼠标经过消失
.months:hover .month_display_arrow,
.twoLei:hover .twoLei_display_arrow {
  display: none !important;
}

// 改点击下拉框后的字体颜色
.tongji_dropdown_menue {
  color: #ffffff;
}

// 使年月的下拉框自在左，icon在右。
.years .el-button,
.months .el-button,
.oneLei .el-button,
.twoLei .el-button {
  width: 160px;
  border-radius: 7px;
  background: rgb(252, 252, 252);
  color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.2);
  /deep/span {
    display: block;
    width: 100px;
    text-align: left;
  }
}

.oneLei .el-button,
.twoLei .el-button {
  width: 140px;
  border-radius: 7px;
  background: rgb(252, 252, 252);
  color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.2);
  /deep/span {
    display: block;
    width: 100px;
    text-align: left;
  }
}
.years .el-button .el-icon--right,
.months .el-button .el-icon--right,
.oneLei .el-button .el-icon--right,
.twoLei .el-button .el-icon--right {
  position: fixed;
  right: 15px;
  color: rgba(0, 0, 0, 0.3);
  background: rgb(252, 252, 252);
}

// 改一类、二类下拉框背景颜色
.twoLei .el-button--primary,
.oneLei .el-button--primary {
  background-color: #fff;
  color: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.2);
}

// 下拉框的总样式
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.foot {
  width: 100%;
  height: 70%;
  margin-top: 30px;
  border-radius: 7px;
  background: rgba(127, 125, 128, 0.1);

  .foot_one,
  .foot_two {
    .text_button {
      font-size: 16px;
      width: 117px;
      height: 44px;
      cursor: pointer;
      color: #409eff;
      text-align: center;
      margin: 30px 45% 40px;
    }
    .chart {
      width: 900px;
      height: 300px;
      // background-color: pink;
      margin: 0px auto;
    }
  }
}
</style>

<script>
import * as echarts from "echarts";
export default {
  data () {
    return {
      inputs: "",
      number: 0,
      number1: true,   //禁用柱状图打印下拉框
      number2: true,   //禁用饼图打印下拉框
      // number3: false,  //禁用年份下拉框
      // number4: true,  //禁用月份下拉框
      myChart_Bar: null,
      myChart_Pie: null,
      tongji_way: ["员工", "商品类别"],
      tongji_way_index: null,
      years: ["2021年", "2020年"],
      years_index: null,
      //years_show: 0,
      months_index: null,
      months_disabled: true,  //控制月份下拉框
      months: [],  //员工月份
      months_datas: [],  //员工每月销量
      oneLei: [],   //一类产品
      oneLei_index: null,
      TwoLei: [],  //二类产品
      TwoLei_disabled: true,
      TwoLei_index: null,
      bie_Datas: [],
    };
  },
  methods: {
    handleClick (command) {
      this.number = command + 1;
      this.tongji_way_index = command;
    },

    command_Years (command) {
      // console.log(command);
      this.years_index = command;
      // this.years_show = 999;
    },


    command_Months (command) {
      if (this.tongji_way_index == 0) {
        var year = String(parseInt(this.years[this.years_index]))
        var a = this.months[command];
        var month = a >= 10 ? a : '0' + a;
        this.months_index = command;
        this.$axios({
          url: "http://192.168.137.1:8080/admin/SalesMonthStats",
          method: "get",
          params: {
            employee_id: parseInt(this.inputs),
            order_date: year + '-' + month
          }
        }).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data.length) {
              this.months_datas = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
              this.months_datas[command] = res.data.data[0];
              this.months[command] = a;
              this.drawLine();
              this.$message({
                type: 'success',
                message: '查询成功',
                duration: 500
              });
            }
          }
        })
      }

      if (this.tongji_way_index == 1) {
        var years = String(parseInt(this.years[this.years_index]))
        var aa = this.months[command];
        var month_m = aa >= 10 ? aa : '0' + aa;
        this.months_index = command;
        this.$axios({
          url: "http://192.168.137.1:8080/admin/GoodsTypeStats2",
          method: 'get',
          params: {
            goods_two_type_name: this.TwoLei[this.TwoLei_index],
            order_date: years + '-' + month_m,
          }
        }).then((res) => {
          if (res.data.code == 200) {
            if (res.data.data.length) {
              this.bie_Datas = res.data.data
              this.drawPie()
            }
          } else {
            this.$message({
              message: '暂无数据',
              duration: 100
            });
          }
        })
      }
    },

    inputs_ID () {
      // console.log("输入" + this.inputs);
    },

    command_OneLei (command) {
      this.oneLei_index = command;
      this.TwoLei_disabled = true;
      this.TwoLei = [];
      this.$axios({
        url: "http://192.168.137.1:8080/admin/queryTwoTypeName",
        method: "get",
        params: { goods_one_type_name: this.oneLei[command] },
      }).then((res) => {
        if (res.data.code == 200) {
          if (res.data.data.length) {
            var arr = [];
            for (const key in res.data.data) {
              arr[key] = res.data.data[key].goods_two_type_name
            }
            this.TwoLei = arr;
            this.TwoLei_disabled = false;
          } else {
            this.$message({
              type: 'info',
              message: '占无该二类商品',
              duration: 3000
            });
          }
        }
      });
    },

    command_TwoLei (command) {
      this.TwoLei_index = command;
    },

    // 查看
    show_Click () {
      if (this.number == 1 || this.number == 2) {
        console.log(this.years[this.years_index]);
        // this.years_show == 999
        if (this.number == 1
          && this.years[this.years_index] != undefined
          && this.inputs != "") {
          this.$axios({
            url: "http://192.168.137.1:8080/admin/SalesYearStats",
            method: "get",
            params: { // 自己获取表单内容   员工编号及年份必传
              employee_id: parseInt(this.inputs),
              order_date: parseInt(this.years[this.years_index]),
            },
          }).then((res) => {
            if (res.data.code == 200) {
              console.log('sss:', this.months_index);
              this.months = [];
              this.months_datas = [];
              // this.months_index = res.data.data.length;
              if (res.data.data.length) {
                for (let index = 0; index < res.data.data.length; index++) {
                  this.months[index] = res.data.data[index].month;
                  this.months_datas[index] = res.data.data[index].money;
                }
                console.log(this.months);
                console.log(this.months_datas);
                this.months_disabled = false;
                this.drawLine();
                this.number1 = false;
                this.$message({
                  type: 'success',
                  message: '查询成功',
                  duration: 500
                });
              }
              else {
                this.$message({
                  message: "暂时无数据",
                  duration: 3000
                });
              }
            }
          });
        }
        // else {
        //   this.$message({
        //     message: "员工号或年份错误！",
        //     duration: 1000
        //   });
        // }

        if (this.number == 2) {
          this.months_disabled = true,
            this.$axios({
              url: "http://192.168.137.1:8080/admin/GoodsTypeStats",
              method: 'get',
              params: {
                goods_two_type_name: this.TwoLei[this.TwoLei_index],
                order_date: this.years[this.years_index]
              }
            }).then((res) => {
              if (res.data.code == 200) {
                console.log(res.data);
                if (res.data.data.length) {
                  this.months = [];
                  this.months_datas = [];
                  this.bie_Datas = res.data.data;
                  this.months_disabled = false;
                  this.months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
                  this.drawPie();
                  this.number2 = false;
                } else {
                  this.$message({
                    message: "暂时无商品信息",
                    duration: 1000,
                  });
                }
              }
              else {
                this.$message({
                  message: "请选择二类商品和年份",
                });
              }
            });
        }
      } else {
        this.$message({
          message: "请选择统计方式",
        });
      }

    },

    drawLine () {
      if (
        this.myChart_Bar != null &&
        this.myChart_Bar != "" &&
        this.myChart_Bar != undefined
      ) {
        // 销毁已经存在的doM节点
        this.myChart_Bar.dispose();
      }
      // 基于准备好的dom，初始化echarts实例
      this.myChart_Bar = echarts.init(document.getElementById("charts"));
      // 绘制图表
      this.myChart_Bar.setOption({
        title: { text: "员工", left: "center" },
        tooltip: {},
        xAxis: {
          data: this.months,
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: "销售总合",
            type: "bar",
            data: this.months_datas,
          },
        ],
      });
    },

    drawPie () {
      if (
        this.myChart_Pie != null &&
        this.myChart_Pie != "" &&
        this.myChart_Pie != undefined
      ) {
        // 销毁已经存在的doM节点
        this.myChart_Pie.dispose();
      }
      // 基于准备好的dom，初始化echarts实例
      this.myChart_Pie = echarts.init(document.getElementById("charts1"));
      // 绘制图表
      this.myChart_Pie.setOption({
        title: {
          text: "商品类别",
          // subtext: "手机",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            data: this.intervals,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
  },

  mounted () {
    this.$axios({
      url: "http://192.168.137.1:8080/admin/queryOneTypeName",
      method: "get",
    }).then((res) => {
      if (res.data.code == 200 && res.data.data.length) {
        var arr = [];
        for (const key in res.data.data) {
          arr[key] = res.data.data[key].goods_one_type_name;
        }
        this.oneLei = arr
      }
      // if(res.data.code == 200){
      //   this.data = res.data.data
      //   this.totals = Math.ceil(res.data.data.length/this.pageSize)*10;
      //   this.currentPages = 1
      //  this.$message({
      //         type: 'success',
      //         message: '查询管理员成功!'
      //       });
      // }else{
      //   this.$message({
      //         type: 'success',
      //         message: '查询管理员失败！'
      //       });
      // }
    });

  },
  computed: {
    intervals () {
      var interval = this.bie_Datas;
      // 方法
      function sortId (a, b) {
        return b.value - a.value;
      }
      interval.sort(sortId);
      // 处理
      if (interval.length > 9) {
        var a = interval.splice(9, interval.length - 9);
        var value = 0;
        for (let index = 0; index < a.length; index++) {
          value += a[index].value;
        }
        var arrs = { value: value, name: "其它" };
        interval.push(arrs);
      }
      return interval;
    },

    // 后台接受通过年返回每个月员工的数据
    // mounth_data () {
    //   // var data = Array.from(this.years_datas); //数组
    //   var data = this.years_datas; //数组
    //   var data1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    //   data.map((item) => {
    //     data1[item.month] += item.total_money
    //   })
    //   var data2 = data1.filter((v, index) => {
    //     if (index > 0)
    //       return {
    //         month: index - 1,
    //         v
    //       }
    //   })
    //   var data3 = data2.map((item, index) => {
    //     return {
    //       month: index + 1,
    //       total_money: item
    //     }
    //   })
    //   return data3
    // },

    // 每月的销售量
    // monthsDatas () {
    //   var datas2 = [];
    //   var j = 0;
    //   for (let i = 0; i < this.mounth_data.length; i++) {
    //     if (this.mounth_data[i] != null && this.mounth_data[i].total_money != 0) {
    //       datas2[j] = this.mounth_data[i].total_money;
    //       j++;
    //     }
    //   }
    //   return datas2
    // },

    // 一年有多少月
    // months () {
    //   var datas1 = [];
    //   var j = 0;
    //   for (let i = 0; i < this.mounth_data.length; i++) {
    //     if (this.mounth_data[i] != null && this.mounth_data[i].total_money != 0) {
    //       datas1[j] = this.mounth_data[i].month;
    //       j++;
    //     }
    //   }
    //   return datas1
    // }

  },
};
</script>